<template>
  <!--应用列表-->
  <basic-container>
    <avue-crud :option="AppListOption"
               :data="data"
               @current-change="currentChange"
               @size-change="sizeChange"
               ref="crud"
               :page.sync="page">
      <template slot="menuLeft">
        <el-button size="small" type="primary"
                   @click="addToTabsList('应用',{oid:-1},'applicationTemp','open')">
          创建应用
        </el-button>
<!--        <el-button size="small" type="primary">
          创建服务
        </el-button>-->
      </template>

      <template slot="menu" slot-scope="{row}">
        <el-button type="text"
                   @click="addToTabsList('应用',row,'applicationTemp','view')">
          查看
        </el-button>
        <el-button type="text"
                   @click="addToTabsList('应用',row,'applicationTemp','edit')">
          修改
        </el-button>
        <el-button type="text" @click="del(row)">删除</el-button>
        <el-button type="text" @click="dispatchUser(row)">分配用户</el-button>

      </template>
    </avue-crud>

    <ms-drawer @refresh="getPage()" ref="md" :visible.sync="visible" :tab-list.sync="tabsList"></ms-drawer>
    <SelectDeptUser :visible.sync="visibleUser" :appInfo="appInfo" />
  </basic-container>
</template>

<script>
import * as api from "@/api/application/index";
import SelectDeptUser from './selectDeptUser.vue';

export default {
  name: "appList",
  inject: ["AppListOption"],
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      data: [],

      visible: false,
      tabsList: [],
      visibleUser: false,
      appInfo:{},
    }
  },
  components:{SelectDeptUser},
  methods: {
    dispatchUser(data){
      this.appInfo={...data};
      this.visibleUser = true;
    },
    __refreshTable() {
      this.$refs["crud"].refreshTable();
    },
    // 向抽屉中添加tab页 根据 oid 去重
    addToTabsList(title, row, component, type) {
      let ids = this.tabsList.map(item => item.row[this.idKey]);
      if (!ids.includes(row[this.idKey])) {
        this.tabsList.push({title, row, component, type})
      }
      this.visible = true;
    },
    del(row) {
      this.$confirm("是否删除？").then(() => {
        api.del({oid: row.oid}).then(() => {
          this.$message.success("删除成功");
          this.getPage();
        })
      })
    },
    getPage() {
      this.data = [];
      api.getPage({current: this.page.currentPage, size: this.page.pageSize}).then(res => {
        let {totalRows, list} = res.data.data;
        this.page.total = totalRows;
        this.data = list;
      })
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getPage();

    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getPage();
    },
  },
  mounted() {
    this.getPage();
    this.$nextTick(() => {      // 表格错位解决方法
      this.$refs.crud.refreshTable();
    })
  }
}
</script>

<style scoped>

</style>
